{% load static %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>首页</title>
    <script
      src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.js"
      crossorigin="anonymous"
    ></script>

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
      crossorigin="anonymous"
    />

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
      crossorigin="anonymous"
    ></script>
    <script
      type="text/javascript"
      src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js"
    ></script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="content container-fluid row">
        <div class="aside col-4 mt-2">
          <div class="top list-group shadow-lg bg-white rounded mb-2">
            {% for player in top5 %}
            <li class="list-group-item list-group-item-action">
              <img
                style="height: 40px; width: 40px"
                src="https://res.nba.cn/media/img/players/head/260x190/{{ player.player_id }}.png"
                class="rounded-circle"
              />
              &nbsp;&nbsp; {{ player.name }} &nbsp;&nbsp;&nbsp;&nbsp; 得分：{{ player.points }}
              &nbsp;&nbsp;/&nbsp;&nbsp;出场时间：{{ player.mins }}
            </li>
            {% endfor %}
          </div>

          {% for team_score in team_score_list|slice:":2" %}
          <div class="container-fluid shadow-lg bg-white rounded mb-2">
            {% include 'pie.html' with data=team_score %}
          </div>

          {% endfor %}
        </div>

        <div class="col-8 mt-2">
          <div class="bar container-fluid row border border-white mb-2 shadow-lg bg-white rounded">
            
            <div class="card col border-0">
              <div class="card-body">
                <h6 class="card-title text-secondary">球员的总数</h6>
                <h3 class="card-text">{{ visual_season.nums }}</h3>
              </div>
            </div>

            <div class="card col border-0">
              <div class="card-body">
                <h6 class="card-title text-secondary">总出场时间</h6>
                <h3 class="card-text">{{ visual_season.mins }}</h3>
              </div>
            </div>
            <div class="card col border-0">
              <div class="card-body">
                <h6 class="card-title text-secondary">总得分</h6>
                <h3 class="card-text">{{ visual_season.points }}</h3>
              </div>
            </div>

            <div class="card col border-0">
              <div class="card-body">
                <h6 class="card-title text-secondary">人均得分</h6>
                <h3 class="card-text">{{ visual_season.per_player_points }}</h3>
              </div>
            </div>
            <div class="card col border-0">
              <div class="card-body">
                <h6 class="card-title text-secondary">分均得分</h6>
                <h3 class="card-text">{{ visual_season.per_min_points }}</h3>
              </div>
            </div>


              <!-- Example single danger button -->
          <div class="btn-group">
            <button
              type="button"
              class="btn btn-info dropdown-toggle"
              data-toggle="dropdown"
              aria-expanded="false"
              id="seasonBtn"
            >
              {{ visual_team.seasons.0 }}
            </button>
            <div class="dropdown-menu">
              {% for season in visual_team.seasons %}
              <a class="dropdown-item" href="#" onclick="selectSeason(this)">{{ season }}</a>
              {% endfor %}
            </div>
          </div>
          </div>

          <div class="container-fluid row shadow-lg bg-white rounded mb-2">
            {% include 'mix-timeline-finance.html' with data2=visual_team %}
          </div>

          
          {% comment %} <div class="container-fluid row shadow-lg bg-white rounded mb-2">
            {% for team_score in team_score_list|slice:"2:3" %}
            <div class="container-fluid col shadow-lg bg-white rounded mb-2">
              {% include 'pie.html' with data=team_score %}
              {%endfor%}
          </div> {% endcomment %}
          
        

        </div>
      </div>
    </div>

    <script>
      var div = document.getElementById("seasonBtn");

      function selectSeason(link) {
        let season = link.innerHTML;
        window.location.href = `/player/index?season=${season}`;
        consle.log(season);
      }

      function getParams() {
        var search = window.location.search.substring(1);
        var params = {};
        if (search) {
          var paramArray = search.split("&");
          for (var i = 0; i < paramArray.length; i++) {
            var param = paramArray[i].split("=");
            var key = decodeURIComponent(param[0]);
            var value = decodeURIComponent(param[1]);
            params[key] = value;
          }
        }
        return params;
      }

      var params = getParams();
      div.innerHTML = getParams()["season"];
    </script>
  </body>
</html>
